<template>
    <div class="wrap">
        <ChangeHeader title="最美达人"></ChangeHeader>
        <div class="banner_img_wrap">
            <img class="banner_img" src="../images/mainOne/exportShow/IMG_zuimei_01.png"></img>
        </div>
        <div class="content">
            <div v-for="(item,index) in exportData" :key="index">
                <ExportShowItem v-bind:name="item.name"
                                v-bind:headPic="item.hicon"
                                v-bind:src1="item.pic_1"
                                v-bind:src2="item.pic_2" />
            </div>
            
            <!-- <ExportShowItem /> -->
        </div>
    </div>
</template>
<script>
import ExportShowItem from "../components/exportShowiItem.vue"
import ChangeHeader from "../components/changeHeader"



export default {
    name: "beautyExport",
    components: {
        ExportShowItem,
        ChangeHeader,
    },
    //组件创建完成后发送get请求获取最美达人数据
    created(){
         var flag = this.$axios.defaults.baseURL == "http://localhost:3000"
         console.log()
        var url = flag ? "/beauty_export" : "/beauty_export.json"
        this.$axios.get(url)
            .then( res=>{
                this.exportData = res.data.data
            })
            .then(error => {
                console.log(error?error:'')
            })

    },
   
     




    data() {
        return {
            exportData:[],
        }
    }
}
</script>

<style lang='less' scoped>
@pub_main_bgcolor :#ff406f;
.headers {
    width: 100%;
    background: @pub_main_bgcolor;
    position: fixed;
    padding-top: 60/75rem;
    font-size: 36/75rem;
    z-index: 3;
    padding-bottom: 16/75rem;
    .headerNav {

        color: #fff;
    }
    .export {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        line-height: 60/75rem;
    }
    .arr {
        font-size: 44/75rem;
        line-height: 60/75rem;
    }
}

.banner_img_wrap {
    background: @pub_main_bgcolor;
    height: 300/72rem;
    width: 100%;
    margin-top: -2px;
   
}

.banner_img {
    position: absolute;
    top: 157/75rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 1px 10px #888888;
    border-radius: 20px;
    width: 711/75rem;
    height: 300/75rem;
}


.content {
    margin-top: 250/75rem;
    margin-left: 2/75rem;
    img{
        width: 316/75rem;
        height: 354/75rem;
    }
}
</style>

